<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="流程名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入流程名称" v-model="queryParam.processDefinitionName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="流程标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入流程标题" v-model="queryParam.$BPMN_TITLE_"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="流程状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-model="queryParam['state@EQ']">
                <a-select-option value="ACTIVE">
                  审批中
                </a-select-option>
                <a-select-option value="SUSPENDED">
                  已暂停
                </a-select-option>
                <a-select-option value="COMPLETED">
                  已完成
                </a-select-option>
                <a-select-option value="INTERNALLY_TERMINATED">
                  已终止
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :md="6" :sm="12">
              <a-form-item label="是否加急" :label-col="labelCol" :wrapper-col="wrapperCol">
                <z-dict-select-tag popupContainer="parent" dictCode="ERP_COMMON_YESNO" v-model="queryParam['$BPMN_SORT_FLAG_@EQ']"/>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
              <a style="margin-left: 8px" @click="handleToggleSearch">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <vxe-grid
        id="MyApplyList"
        ref="vxeTable"
        v-bind="gridOptions"
        :row-config="{keyField:'code'}"
      >
      <template #action="{ row }">
        <!-- <a href="javascript:;">取回</a>
        <a-divider type="vertical" /> -->
        <a href="javascript:;" @click="handleDetail(row)">查看</a>
        <a-divider type="vertical" v-if="row.state ==='ACTIVE'" />
        <a href="javascript:;" @click="handleSuspend(row)" v-if="row.state ==='ACTIVE'">暂停</a>
        <a-divider type="vertical" v-if="row.state ==='SUSPENDED'" />
        <a href="javascript:;" @click="handleStart(row)" v-if="row.state ==='SUSPENDED'">开始</a>
        <a-divider type="vertical" v-if="row.state ==='ACTIVE'" />
        <a href="javascript:;" @click="handleUrgent(row)" v-if="row.state ==='ACTIVE' && row.bpmnSortFlag === '0'">加急</a>
      </template>
      <template #state="{ row }">
        <a-tag :key="row.id" color="orange" v-if="row.state ==='ACTIVE'">审批中</a-tag>
        <a-tag :key="row.id" color="#f50" v-if="row.state ==='SUSPENDED'">已暂停</a-tag>
        <a-tag :key="row.id" color="green" v-if="row.state ==='COMPLETED'">已完成</a-tag>
        <a-tag :key="row.id" color="red" v-if="row.state ==='INTERNALLY_TERMINATED'">已终止</a-tag>
      </template>
      <template #bpmnSortFlag="{ row }">
        <a-tag v-if="row.bpmnSortFlag === '0'" color="#2db7f5">普通</a-tag>
        <a-tag v-else color="red">紧急</a-tag>
      </template>
    </vxe-grid>
    </div>
    <TaskPendingModal ref="modalForm" type="history" :hasCancel="true" @ok="modalFormOk" />
  </a-card>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import TaskPendingModal from './modules/TaskPendingModal'
import ZRangePicker from '@/components/zz/ZRangePicker'
import { getAction, putAction } from '@/services/manage'
import moment from 'moment'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
export default {
  name: 'MyApplyList',
  components: { TaskPendingModal, ZRangePicker, ZDictSelectTag },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'seq', width: 40 },
        { title: '流程标题', field: 'title' },
        { title: '流程编码', field: 'processDefinitionKey' },
        { title: '流程名称', field: 'processDefinitionName' },
        { title: '流程版本', field: 'processVersion' },
        { title: '开始时间', field: 'startTime', slots: { default: ({ row }) => {
          return moment(row.startTime).format('YYYY-MM-DD HH:mm:ss')
        } }},
        { title: '紧急级别', field: 'bpmnSortFlag', slots: { default: 'bpmnSortFlag' }, sortable: true },
        { title: '审批状态', field: 'state', slots: { default: 'state' }},
        { title: '操作', slots: { default: 'action' }, width: 170 }
      ],
      sortConfig: {
        defaultSort: [
          // {
          //   field: 'bpmnSortFlag',
          //   order: 'desc'
          // },
          {
            field: 'startTime',
            order: 'asc'
          }
        ]
      },
      url: {
        list: '/camunda/process/page/my',
        suspend: '/camunda/process/suspend/',
        start: '/camunda/process/restart/',
        urgent: '/camunda/process/urgent/'
      },
      toolbarConfig: {
        buttons: [],
        import: false
      }
    }
  },
  methods: {
    handleDetail(row) {
      row.processInstanceId = row.id
      this.$refs.modalForm.show(row)
    },
    handleSuspend(row) {
      getAction(`${this.url.suspend}${row.id}`).then(res => {
        if (res.success) {
          this.$message.success('暂停成功')
          this.loadData()
        }
      })
    },
    handleStart(row) {
      getAction(`${this.url.start}${row.id}`).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.loadData()
        }
      })
    },
    handleUrgent(row) {
      putAction(`${this.url.urgent}${row.id}`, { $bpmnSortFlag: '1' }).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.loadData()
        }
      })
    }
  }
}
</script>

